<template>

    <navBar/>

    <div class="hanghang-box-0" style="width:100%;">
        <div style="display:flex; justify-content:center">
            <div class="container-2">
                <div class=" hanghang-bg" style="min-height: 886px;">
                    <div class="hanghang-content">
                        
                        <view class="v_out v_out_p">
                            <swiper
                              ref="swiperRef"
                              class="swiper-cont"
                              :current="currentIndex"
                              @change="onSwiperChange"
                              :autoplay="true"
                              :circular="true"
                              :duration="1000"
                              :style="{ width:'940px', height: '350px' }"
                            >
                              <swiper-item 
                                v-for="(item, index) in bookList" 
                                :key="index"
                              >
                                <image 
                                  :src="item.image" 
                                  mode="aspectFill"
                                  class="swiper-image"
                                  :style="{ width:'940px', height: '350px' }"
                                />
                              </swiper-item>
                            </swiper>

                            <!-- 自定义导航按钮 -->
                            <div class="prev setTime" @click="swipePrev">
                              <a href="javascript:void(0)"></a>
                            </div>
                            <div class="next setTime" @click="swipeNext">
                              <a href="javascript:void(0)"></a>
                            </div>
                          </view>

                        <div class="hanghang-user">
                            <div class="hanghang-user-logo">
                                <img src="@/static/logo.png">
                            </div>
                            <div class="hanghang-user-font">
                                <p>
                                    爱好：写作、读书、旅行
                                </p>
                                <p>
                                    像草根一样，紧贴地面，低调生活
                                </p>
                                <p>
                                    联系：QQ：2338856113
                                </p>
                            </div>
                        </div>
                        <div class="clearFloat">
                        </div>
                        <commonList/>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <view class="footer">
        <div class="hanghang-box">
            @行行：QQ：2338856113
        </div>
    </view>

</template>

<script setup>
    import { ref } from 'vue'
    import { useRouter } from 'vue-router';
    import navBar from '@/pages/components/nav-bar.vue';
    import commonList from '@/pages/index/common-list.vue';

    const currentIndex = ref(0)
    
    const bookList = [
      { image: '/static/images/book/5cda53f056b56.jpg' },
      { image: '/static/images/book/5cda53fdc864b.jpg' }
    ]

    const onSwiperChange = (e) => {
      currentIndex.value = e.detail.current
    }

    const swipePrev = () => {
      const newIndex = currentIndex.value - 1
      currentIndex.value = newIndex < 0 ? bookList.length - 1 : newIndex
    }

    const swipeNext = () => {
      const newIndex = currentIndex.value + 1
      currentIndex.value = newIndex >= bookList.length ? 0 : newIndex
    }

    // 共享的状态
    const activeId = ref(0)
    const categoryId = ref(0)
    const page = reactive({
      currentPage: 1,
      pageSize: 20,
      total: 0,
      pages: 0
    })
    // 提供给子组件
    provide('activeId', activeId)
    provide('categoryId', categoryId)
    provide('page', page)
    // provide('getDataList', getDataList)
</script>

<style scoped lang="scss">
    @use './index.scss'; 
</style>